<!DOCTYPE html>
<html>
<head>
    <title>Canvas绘制具有圆角的矩形</title>
    <style>
        body{
            background-color: bisque;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="180" height="60"></canvas>

    <script>
        // 
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        var width = 150;
        var height = 40;
        var cornerRadius = 10;

        var offset = 5;

    
        ctx.beginPath();
        ctx.moveTo(cornerRadius, offset);
        ctx.lineTo(width - cornerRadius, offset);
        ctx.arcTo(width, offset, width, cornerRadius, cornerRadius);
        ctx.lineTo(width, height - cornerRadius);
        ctx.arcTo(width, height, width - cornerRadius, height, cornerRadius);
        ctx.lineTo(cornerRadius, height);
        ctx.arcTo(offset, height, offset, height - cornerRadius, cornerRadius);
        ctx.lineTo(offset, cornerRadius);
        ctx.arcTo(offset, offset, cornerRadius, offset, cornerRadius);

        // 添加阴影效果
        // 需要画布大小要大于图层大小，否则阴影会被截掉看不到阴影效果
        ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
        ctx.shadowBlur = 3;

        ctx.fillStyle = 'white';
        ctx.fill();
        
    </script>
</body>
</html>